import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import styles from "@/pages/Home/index.less";
import moment from "moment";
import debounce from "lodash/debounce";
import {Icon} from "antd";
@connect(({ devices, loading }) => ({
  devices
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.state = {
      boxH: 0,
      listMarginTop: '0',
      animate: false,
      auto: true,
      time: moment().format('YYYY-MM-DD HH:mm:ss'),
      IsFull:false
    };
  }


  componentDidMount() {
    this.timer = setInterval(
      () => this.setState({ time: moment().format('YYYY-MM-DD HH:mm:ss') }),
      1000,
    );
    window.addEventListener('resize', this.resize);
  }
  resize = () => {
    this.resizeChart()
  };
  resizeChart = () => {
    this.setState({
      IsFull: this.IsFull(),
    });
  };
  // 判断是否全屏
  IsFull = () => {
    const fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
    const fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
    if (fullscreenElement == null) {
      return false;
    }
    return true;
  };

  componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }



  render() {
    const { dispatch } = this.props;
    return <div className={"iframe_container"} style={{width:'100%',background:'#000000',height:'100%',position:'relative'}}>
      <div style={{
        position: "absolute",top:"8px",
        height:"64px",
        lineHeight:"58px",
        left:"10px",
        right:"10px",
        // backdropFilter: "blur(8px)",
        background: "url(https://www.thingjs.com/udatav/getimagebyid?id=006fec3a950b4ac682bd591e372abd6f.png) 50%/100% 100% no-repeat",
        marginBottom: "8px",
        paddingBottom:"4px",
        textAlign:"center",
        color:"#fff",
        fontSize:"34px",
        fontFamily: "青春体",
        zIndex:999
      }}>
        塔尔郎水厂
      </div>
      <span  style={{
        position: "absolute",
        right:"18px",
        top:'18px',
        color:"#00ffff",
        fontSize:"24px",
        fontFamily: "青春体",
        zIndex:999
      }}>{this.state.time}</span>
      <span  style={{
        position: "absolute",
        left:"18px",
        top:'18px',
        color:"#00ffff",
        fontSize:"24px",
        fontFamily: "青春体",
        zIndex:999
      }}>万泉水务</span>
      <iframe src="https://www.thingjs.com/pp/830b176940bce1eb9883cc92" style={{width:'100%',height:'100%',border:'none'}}></iframe>

      {
        !this.state.IsFull&&
        <div className={styles.homeFullIcon}
             onClick={() => {
               const element = document.querySelector('.iframe_container');
               if (this.state.IsFull) {
                 if (document.exitFullscreen) {
                   document.exitFullscreen();
                 } else if (document.mozCancelFullScreen) {
                   document.mozCancelFullScreen();
                 } else if (document.webkitExitFullscreen) {
                   document.webkitExitFullscreen();
                 }
               } else if (element.requestFullscreen) {
                 element.requestFullscreen();
               } else if (element.msRequestFullscreen) {
                 element.msRequestFullscreen();
               } else if (element.mozRequestFullScreen) {
                 element.mozRequestFullScreen();
               } else if (element.webkitRequestFullscreen) {
                 element.webkitRequestFullscreen();
               }
             }}
        >
          <Icon className={styles.homeFullIconContent} type={this.state.IsFull ? 'fullscreen-exit' : 'fullscreen'}/>
        </div>
      }

    </div>;
  }
}

export default BasicList;
